﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JustATest.aspx.cs" Inherits="OnlineCooperation.JustATest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript" src="js/canas.js">
        
    </script>
    <link href="css/firebase_canvas.css" rel="stylesheet"/>
    <style type="text/css">
a,img{border:0;}
body{_background-image:url(about:blank);/*用浏览器空白页面作为背景*/_background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/ }
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E3E4E2;}
/* float-news */
.float-news,.float-open{background:#fbfbfb;border:2px solid #e1e1e1;border-right:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);display:inline-block;font-size:16px;}
.float-news{height:380px;right:0px;padding:10px 15px;width:300px;z-index:100;top:117px;_margin-top:117px;}
.float-open{height:48px;right:-70px;padding:4px 4px 4px 6px;width:48px;z-index:99;top:206px;_margin-top:206px;}
.float-news,.float-open{position:fixed;*zoom:1;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));right:2px;}
.float-close{background:url(img/nav-close.png) no-repeat right top;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);position:absolute;right:9px;text-indent:100%;top:10px;white-space:nowrap;width:48px;}
.open-btn{background:url(img/ml-open-demo.png) no-repeat right top;display:block;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);text-indent:100%;white-space:nowrap;width:48px;transform: rotateY(180deg);  -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;}
.float-close:hover,.open-btn:hover{opacity:1;filter:alpha(opacity=100);}
.newslist h3{color:#333;border-bottom:4px solid #F2F2F2;font-size:26px;height:54px;line-height:54px;font-family:Microsoft Yahei,simsun,arial,sans-serif;}
.newslist ul{margin-top:10px;}
.newslist li{position:relative;height:30px;line-height:30px;font-size:14px;border-bottom:1px #ccc dotted}
.newslist li a{color:#404040;}
.newslist li span{position:absolute;right:0;color:#ccc;}
.newslist li:last-child{border-bottom:0;}
</style>
    <style tyle="text/css">
        .divscroll
        {
            /*   滚动条 */ /*   overFlow: auto ; */ /* visible ：却省的 hidden auto scroll */
            overflow-y: scroll; /*   滚动条相关的颜色属性 */
            scrollbar-face-color: green; /* 滑块 */
            scrollbar-hightlight-color: red; /* 高亮 */
            scrollbar-3dlight-color: orange; /* 3维光线 */
            scrollbar-darkshadow-color: blue; /* 暗影    */
            scrollbar-shadow-color: yellow; /* 阴影   */
            scrollbar-arrow-color: purple; /* 箭头 */
            scrollbar-track-color: black; /* 滑道颜色 */
            scrollbar-base-color: pink; /* 主要颜色 */
        }
        
        .btn{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .2s;
-moz-transition: -moz-transform .2s;
-ms-transition: -ms-transform .2s;
-o-transition: -o-transform .2s;
transition: transform .2s;
width:60px;
height: 30px;
border: 0px;
display: block;
float: left;
margin-left: 6px;
}
.btn:hover{
-webkit-transform:scale(1.05);
transform:scale(1.05);
}
.btn:ACTIVE{
-webkit-transform:scale(0.9);
transform:scale(0.9);
}
    </style>
</head>
<body>
    <!-- 画板 -->
    <canvas id="canvas" width="600" height="500" style="border:1px solid #999;position:absolute;top:50px;left:50px;"></canvas>
	<canvas id="canvas2" width="600" height="500" style="border:1px solid #999;position:absolute;top:50px;left:50px;"></canvas>

	<span class="btn" onclick="$('#forbiden_back').fadeIn(300)" style="background-image: url(img/open_url.png)"></span>
	<span class="btn" onclick="change_attr(0,-1,-1)" style="background-image: url(img/pencil.png)"></span>
	<span class="btn" onclick="change_attr(1,-1,-1)" style="background-image: url(img/straight.png)"></span>
	<span class="btn" onclick="change_attr(2,-1,-1)" style="background-image: url(img/star_straight.png)"></span>
	<span class="btn" onclick="change_attr(3,-1,-1)" style="background-image: url(img/circle.png)"></span>
	<span class="btn" onclick="change_attr(4,-1,-1)" style="background-image: url(img/rect.png)"></span>
	<span class="btn" onclick="gaussian()" style="background-image: url(img/blur.png)"></span>
	<span class="btn" onclick="change_attr(5,-1,-1)" style="background-image: url(img/eraser.png)"></span>
	<span class="btn" onclick="fill_canvas('#ffffff',0,0,canvas_size.x,canvas_size.y)" style="background-image: url(img/clear.png)"></span>
	<span id="size_span" style="border: 1px solid #999;width:15px;height: 15px;margin-top:7px;margin-left: 50px;display: block;float: left;margin-left: 20px">1</span>
	<div id="size_bar" style="width: 100px;height: 5px;background-color:#999; float: left;margin: 12px;position: relative;">
		<span id="size_thumb" class="btn" onClick="" style="background-color:#666;;width: 15px; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:8px;
		border-bottom-right-radius:8px;height: 15px;margin:0px; margin-top:-5px;position: absolute;left: 0px;"></span>
	</div>
	<span id="color_span" style="border: 1px solid #999;background-color:#00aeef;width:15px;height: 15px;margin-top:7px;display: block;float: left;margin-left: 10px"></span>
	<canvas id="canvas_color" width="198" height="15" style="border:1px solid #999;margin-top:7px;margin-left:10px;float:left;"></canvas>
	
	<div style="width: 300px;height: 300px;position: absolute;left:650px;top:50px;">
		<span id="r_channel_span" style="border: 1px solid #999;width:15px;height: 15px;margin-top:7px;margin-left: 50px;display: block;float: left;margin-left: 20px">r</span>
		<div id="r_channel_bar" style="width: 100px;height: 5px;background-color:#999; float: left;margin: 12px;position: relative;">
			<span id="r_channel_thumb" class="btn" onClick="" style="background-color:#666;width: 15px; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:8px;
			border-bottom-right-radius:8px;height: 15px;margin:0px; margin-top:-5px;position: absolute;left: 45%;"></span>
		</div>
		<div style="clear: both;"></div>
		<span id="g_channel_span" style="border: 1px solid #999;width:15px;height: 15px;margin-top:7px;margin-left: 50px;display: block;float: left;margin-left: 20px">g</span>
		<div id="g_channel_bar" style="width: 100px;height: 5px;background-color:#999; float: left;margin: 12px;position: relative;">
			<span id="g_channel_thumb" class="btn" onClick="" style="background-color:#666;;width: 15px; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:8px;
			border-bottom-right-radius:8px;height: 15px;margin:0px; margin-top:-5px;position: absolute;left: 45%;"></span>
		</div>
		<div style="clear: both;"></div>
		<span id="b_channel_span" style="border: 1px solid #999;width:15px;height: 15px;margin-top:7px;margin-left: 50px;display: block;float: left;margin-left: 20px">b</span>
		<div id="b_channel_bar" style="width: 100px;height: 5px;background-color:#999; float: left;margin: 12px;position: relative;">
			<span id="b_channel_thumb" class="btn" onClick="" style="background-color:#666;;width: 15px; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:8px;
			border-bottom-right-radius:8px;height: 15px;margin:0px; margin-top:-5px;position: absolute;left: 45%;"></span>
		</div>
	</div>
	<div id="forbiden_back" style="width: 100%;height: 100%;background-image: url(img/pattern.png);position: absolute;top: 0px;left: 0px;display: none;">
		<div style="width: 382px;height: 170px;background-image: url(img/open_window.png);margin: 0 auto;margin-top: 200px;position: relative;">
			<input id="pic_url" type="text" style="width:250px; margin: 53px;margin-left: 83px;"/>
			<div id="close_window" style="width: 20px;height: 15px;border: 0px solid green;position: absolute;right:20px;top: 10px"></div>
			<div id="open_pic" style="width: 80px;height: 30px;border: 0px solid green;position: absolute;left:155px;top: 102px" onClick="open_img(pic_url)"></div>
		</div>
	</div>
    <!-- 聊天板 -->
    <div class="float-open" id="float-open" style="right: -2px;">
        <a class="open-btn" href="javascript:void(0);">&gt;</a>
    </div>

    <div class="float-news" id="float-news" style="right: -450px;">
        <a class="float-close" href="javascript:void(0);">X</a>
        <div class="newslist" >
            <h3>
                聊天板
            </h3>
            <div id='messagesDiv' class="divscroll"  style="height: 200px;">
            </div>
            <div>
                <input type='text' id='nameInput' placeholder='Name' />
                <input type='text' id='messageInput' placeholder='Message' />
            </div>
        </div>
    </div>

    <script>
        var myDataRef = new Firebase('https://ofp5sw6af7y.firebaseio-demo.com/');
        $('#messageInput').keypress(function (e) {
            if (e.keyCode == 13) {
                var name = $('#nameInput').val();
                var text = $('#messageInput').val();
                myDataRef.push({ name: name, text: text });
                $('#messageInput').val('');
            }
        });
        myDataRef.on('child_added', function (snapshot) {
            var message = snapshot.val();
            displayChatMessage(message.name, message.text);
        });
        function displayChatMessage(name, text) {
            $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#messagesDiv'));
            $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
        };


        
    </script>
</body>
</html>
